<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/cases.css">
</head>
<body>
	<div class="bannerS">
		
		<!-- 导航栏 -->
	<div class="nav ">
		<div class="banner">
			<img src="https://www.buchouwang.com/img/logo.a2dacc49.png">
		</div>
		<div class="nav-center">
			<a href="./index.html" class="item-on">首页 <span></span></a>
			<a href="javascript:;" class="product">产品介绍 <span></span>
				<div class="Invisibility">
				<div class="subnav"></div>
			</div>
			</a>
			
			<a href="./sec.html">解决方案 <span></span></a>
			<a href="./cases.html">案例展示 <span></span></a>
			<a href="./news.html">新闻中心 
				<span></span>
				
			</a>
			<a href="./about.html">关于我们 <span></span></a>
			<a href="./careers.html">加入我们 
				<span></span>
			</a>
			<a href="./pig.html">生猪交易 <span></span></a>
			<a href="./demo.html">申请演示 <span></span></a>
		</div>
        	
	</div>
	<div class="bantie">
			<div class="bancon">
				<div class="banner-title">案例展示</div>
				<div class="banner-info">案例展示</div>
			</div>
		</div>
</div>
	<div class="detail-wrap">
		<div class="center-wrap">
			<div class="detail-title">
				首页>
				<span>案例展示</span>
			</div>
			<div class="case-list-wrap">
			<div class="case-list-title">案例展示</div>
			<div style="height: 900px;">
				<ul class="list-ul clearfix">
			</ul>
			<ul class="list2-Ul">
				
			</ul>
			<ul class="list3-Ul">
				
			</ul>
			</div>
			
			<div class="el-pagination">
				<div class="switchPage">
					<span class="Total">共 14 条</span>
					<button class="btnprev" disabled="disabled"><</button>
					<ul>
						<li class="number active">1</li>
						<li class="number">2</li>
						<li class="number">3</li>
					</ul>
					<button class="btnnext">></button>
					<span class="pagejump">前往<input type="number"name="">页</span>
				</div>
			</div>
			</div>
		</div>
	</div>
	<!-- 网页底部 -->

	<script type="text/javascript" src="ajax.js"></script>
	<script type="text/javascript" src="jquery-3.2.1.js"></script>
	<script type="text/javascript">
		console.log(location.href)
		let id = location.href.split('=')[1];



			//二级导航
			let subnav = document.querySelector(".subnav")
			ajax({
			  method: "get",
			  url: "stage-api/website/getProductMenuInfo",
			}).then(res => {
			  for(let i = 0; i < res.data.length; i++){
			    if (i == 4) {
			      continue;
			    }else if(i == 6){
			      continue;
			    }else{
			      subnav.innerHTML += `<div class="subtag" onclick=detail('${res.data[i].productId}')>
			                            <img src=${res.data[i].menuIcon.split("?")[0]}>
			                            <p>${res.data[i].productName}</p >
			                            </div>`
			    }
			  }
			})

			  function detail(productId){
			    location.href = `po.html?productId=${productId}`
			  }
			  $(".product").hover(function(){
				  $(".Invisibility").css("display", "block")
				}, function(){
				  $(".Invisibility").css("display", "none")
				})


			  //案例展示
			  let list2 = document.querySelector(".list2-Ul")
			  ajax({
			  	method:"get",
			  	url: "stage-api/website/getAllCaseCompany",
			  	params:{
			  		pageNum:2,
			  		pageSize:6,
			  	}
			  })
			  .then(res => {
			  	for(let i = 0; i < res.rows.length; i++){
			  		list2.innerHTML += `<li class="item-wrap" >
					<div class="item" onclick=cas(${res.rows[i].caseCompanyId})>
						<div class="item-img">
							<img src="${res.rows[i].companyLogoPhoto}">
						</div>
						<div class="item-text">
							<div class="title">
								${res.rows[i].caseCompanyName}
								<span class="line"></span>
							</div>
							<div class="content">
								${res.rows[i].remark}
							</div>
							<div class="time">${res.rows[i].createTime.split(" ")[0]}</div>
							<div class="btn">查看详情</div>
						</div>
					</div>
				</li>`
			  	}
			  })
			   let list3 = document.querySelector(".list3-Ul")
			  ajax({
			  	method:"get",
			  	url: "stage-api/website/getAllCaseCompany",
			  	params:{
			  		pageNum:3,
			  		pageSize:6,
			  	}
			  })
			  .then(res => {
			  	for(let i = 0; i < res.rows.length; i++){
			  		list3.innerHTML += `<li class="item-wrap" >
					<div class="item" onclick=cas(${res.rows[i].caseCompanyId})>
						<div class="item-img">
							<img src="${res.rows[i].companyLogoPhoto}">
						</div>
						<div class="item-text">
							<div class="title">
								${res.rows[i].caseCompanyName}
								<span class="line"></span>
							</div>
							<div class="content">
								${res.rows[i].remark}
							</div>
							<div class="time">${res.rows[i].createTime.split(" ")[0]}</div>
							<div class="btn">查看详情</div>
						</div>
					</div>
				</li>`
			  	}
			  })
			   let list = document.querySelector(".list-ul")
			  ajax({
			  	method:"get",
			  	url: "stage-api/website/getAllCaseCompany",
			  	params:{
			  		pageNum:1,
			  		pageSize:6,
			  	}
			  })
			  .then(res => {
			  	for(let i = 0; i < res.rows.length; i++){
			  		list.innerHTML += `<li class="item-wrap" >
					<div class="item" onclick=cas(${res.rows[i].caseCompanyId})>
						<div class="item-img">
							<img src="${res.rows[i].companyLogoPhoto}">
						</div>
						<div class="item-text">
							<div class="title">
								${res.rows[i].caseCompanyName}
								<span class="line"></span>
							</div>
							<div class="content">
								${res.rows[i].remark}
							</div>
							<div class="time">${res.rows[i].createTime.split(" ")[0]}</div>
							<div class="btn">查看详情</div>
						</div>
					</div>
				</li>`
			  	}
			  })
			   // 分页
			  	let num = document.querySelectorAll(".number")
			  	let inp = document.querySelector(".pagejump input")
			  	num[2].onclick = function(){
			  		num[1].className = "number"
			  		num[0].className = "number"
			  		this.className = "number active"
			  		$(".list-ul").css("display" , "none")
			  		$(".list2-Ul").css("display","none")
			  		$(".list3-Ul").css("display","block")
			  		$(".btnnext").attr("disabled", true)
			  		$(".btnprev").attr("disabled", false)
			  	}
			  	num[1].onclick = function(){
			  		num[2].className = "number"
			  		num[0].className = "number"
			  		this.className = "number active"
			  		$(".list-ul").css("display" , "none")
			  		$(".list2-Ul").css("display","block")
			  		$(".list3-Ul").css("display","none")
			  		$(".btnnext").attr("disabled", false)
			  		$(".btnprev").attr("disabled", false)
			  	}
			  	num[0].onclick = function(){
			  		num[1].className = "number"
			  		num[2].className = "number"
			  		this.className ="number active"
			  		$(".list3-Ul").css("display","none")
			  		$(".list2-Ul").css("display","none")
			  		$(".list-ul").css("display","block")
			  		$(".btnprev").attr("disabled", true)
			  		$(".btnnext").attr("disabled",false)
			  	}
			  	$(".btnnext").click(function(){
			  		document.querySelector('.active').nextElementSibling.onclick()
			  	})
			  	$(".btnprev").click(function(){
			  		document.querySelector('.active').previousElementSibling.onclick()
			  	})
			  	$(".pagejump input").blur(function(){
			  		if(inp.value >= 3){
			  			inp.value = 3;
			  			num[2].onclick()
			  		}else if(inp.value <= 1){
			  			inp.value = 1;
			  			num[0].onclick()
			  		}else{
			  			inp.value = 2;
			  			num[1].onclick()
			  		}
			  	})
			   function cas(caseCompanyId){
			    location.href = `cases2.html?caseCompanyId=${caseCompanyId}`
			  }
	</script>
</body>
</html>